<template>
  <div>
    <div>
      <div class="day-title-box">周</div>
      <div class="day-title-box">一</div>
      <div class="day-title-box">二</div>
      <div class="day-title-box">三</div>
      <div class="day-title-box">四</div>
      <div class="day-title-box">五</div>
      <div class="day-title-box">六</div>
      <div class="day-title-box">日</div>
    </div>
    <div class="d-flex">
      <div style="width: 32px" @click.stop="dayClick($event)">
        <div
          v-for="item in weekStartCount"
          :key="item.id"
          :data-weeks="item.id"
          :class="item.class"
        >
          {{ item.count }}
        </div>
      </div>
      <div>
        <ul class="day-box">
          <li
            v-for="item in daysObj"
            class="not-day"
            :key="item.date"
            :data-days="item.date"
          >
            {{ item.value }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "weekComponent",
};
</script>
<script setup>
import { computed } from "@vue/reactivity";
const moment = window.moment;
//eslint-disable-next-line
const props = defineProps({
  yearMonth: String,
  thisYearStart: String,
  lastYearStart: String,
  nextYearStart: String,
  value: String,
  min: String,
  max: String,
  weekInfo: Object,
});
//eslint-disable-next-line
const emit = defineEmits(["update:value"]);
let minWeekCount = computed(() => {
  let minYearObj = moment(props.min, " YYYYMMDD");
  let minYearWeekStartDate = moment(
    props.weekInfo[minYearObj.get("year")],
    " YYYYMMDD"
  );
  let count = getWeekNum(minYearObj.diff(minYearWeekStartDate, "days") / 7);
  return `${minYearObj.get("year")}${count.toString().padStart(2, "0")}`;
});
let maxWeekCount = computed(() => {
  let maxYearObj = moment(props.max, " YYYYMMDD");
  let maxYearWeekStartDate = moment(
    props.weekInfo[maxYearObj.get("year")],
    " YYYYMMDD"
  );
  //减1是因为最大周只到当周就可以了
  let count = getWeekNum(maxYearObj.diff(maxYearWeekStartDate, "days") / 7)-1;
  return `${maxYearObj.get("year")}${count.toString().padStart(2, "0")}`;
});
//获取当前应该显示的日期信息
let daysObj = computed(() => {
  let result = [];
  let startMoment = moment(props.thisYearStart, "YYYYMMDD");
  let nowMoment = moment(props.yearMonth, "YYYYMM");
  let weekNumer = nowMoment.diff(startMoment, "days") % 7;
  if (weekNumer < 0) {
    weekNumer += 7;
  }
  if (weekNumer > 0) {
    let startOfMonth = moment(props.yearMonth, "YYYYMM").startOf("month");
    while (weekNumer > 0) {
      let momObj = startOfMonth.subtract(1, "days");
      let date = momObj.get("date");
      let str = momObj.format("YYYYMMDD");
      result.unshift({ value: date, class: "not-day", date: str });
      weekNumer--;
    }
  }
  let nowDateCount = moment(props.yearMonth, "YYYYMM")
    .endOf("month")
    .get("date");
  let index = 1;
  while (index <= nowDateCount) {
    result.push({
      value: index,
      class: "not-day",
      date: nowMoment.format("YYYYMM") + index.toString().padStart(2, "0"),
    });
    index++;
  }
  let monthEndDay = moment(props.yearMonth, "YYYYMM").endOf("month");
  weekNumer = monthEndDay.diff(startMoment, "days") % 7;
  if (weekNumer < 6) {
    while (weekNumer < 6) {
      let memObj = monthEndDay.add(1, "days");
      let date = memObj.get("date");
      let str = memObj.format("YYYYMMDD");
      result.push({ value: date, class: "not-day", date: str });
      weekNumer++;
    }
  }
  return result;
});
//计算当月第一天是第几周
let weekStartCount = computed(() => {
  const arr = [];
  let startOfMonth = moment(props.yearMonth, "YYYYMM").startOf("month");
  let endOfMonth = moment(props.yearMonth, "YYYYMM").endOf("month");
  let thisYearStart = moment(props.thisYearStart, "YYYYMMDD");
  let thisYear = moment(props.yearMonth, "YYYYMM").get("year");
  let nextYearStart = moment(props.nextYearStart, "YYYYMMDD");
  let lastYearStart = moment(props.lastYearStart, "YYYYMMDD");
  if (
    startOfMonth.get("month") === 0 &&
    +startOfMonth.format("YYYYMMDD") < +thisYearStart.format("YYYYMMDD")
  ) {
    //一月并且本月包含去年周
    let count = getWeekNum(startOfMonth.diff(lastYearStart, "days") / 7);
    arr.push({ id: `${lastYearStart.get("year")}${count}`, count, class : `${lastYearStart.get("year")}${count}` === props.value ? "select-day" : checkWeekStatus(`${lastYearStart.get("year")}${count}`) ? "day" : "not-day"});
    let index = 1;
    while (arr.length < daysObj.value.length / 7) {
      let id = `${thisYear}${index.toString().padStart(2, "0")}`;
      let status = checkWeekStatus(id);
      arr.push({
        id,
        count: index,
        class: id === props.value ? "select-day" : status ? "day" : "not-day",
      });
      index++;
    }
  } else if (
    startOfMonth.get("month") === 11 &&
    +endOfMonth.format("YYYYMMDD") > +nextYearStart.format("YYYYMMDD")
  ) {
    //12月并且本月包含来年周
    let result = getWeekNum(startOfMonth.diff(thisYearStart, "days") / 7);
    let k = 0;
    while (arr.length < daysObj.value.length / 7 - 1) {
      let id = `${thisYear}${(result + k).toString().padStart(2, "0")}`;
      let status = checkWeekStatus(id);
      arr.push({
        id,
        count: result + k,
        class: id === props.value ? "select-day" : status ? "day" : "not-day",
      });
      k++;
    }
    let id = `${nextYearStart.get("year")}01`;
    let status = checkWeekStatus(id);
    arr.push({
      id,
      count: 1,
      class: id === props.value ? "select-day" : status ? "day" : "not-day",
    });
  } else {
    let result = getWeekNum(startOfMonth.diff(thisYearStart, "days") / 7);
    console.log(result);
    for (let index = 0; index < daysObj.value.length / 7; index++) {
      let id = `${thisYear}${(result + +index).toString().padStart(2, "0")}`;
      let status = checkWeekStatus(id);
      console.log(id, status);
      arr.push({
        id,
        count: result + +index,
        class: id === props.value ? "select-day" : status ? "day" : "not-day",
      });
    }
  }
  return arr;
});
const dayClick = (event) => {
  if (!event.target.className.includes("not-day")) {
    let value = event.target.getAttribute("data-weeks");
    emit("update:value", `${value}`);
  }
};
//工具函数区
const getWeekNum = (num) => {
  return parseInt(+num + 1);
};
//用于判断当前周是否是选择范围内
const checkWeekStatus = (num) => {
  if (+num > +maxWeekCount.value || +num < +minWeekCount.value) {
    return false;
  }
  return true;
};
</script>
<style lang="scss" scoped>
.day-title-box {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
}
.day-box {
  list-style: none;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}
.day {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.select-day {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
  background: #357ebd;
}
.not-day {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  color: #898989;
}
.day:hover {
  background: #eeeeee;
}
</style>
